Timeline

<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --purple-50: #EEEDFE;
    --purple-200: #AFA9EC;
    --purple-500: #534AB7;
    --purple-700: #3C3489;
    --purple-900: #26215C;
    --teal-50: #E1F5EE;
    --teal-400: #1D9E75;
    --teal-700: #085041;
    --gray-50: #F9F8F6;
    --gray-100: #F1EFE8;
    --gray-200: #D3D1C7;
    --gray-400: #888780;
    --gray-700: #444441;
    --gray-900: #1a1a18;
    --text-primary: #18181a;
    --text-muted: #5a5a60;
    --text-faint: #9090a0;
    --border: rgba(0,0,0,0.08);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
  }


  /* Hero */
  .hero {
    background: var(--purple-900);
    padding: 80px 40px 60px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(83,74,183,0.5) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    bottom: -60px; left: 10%;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29,158,117,0.25) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero-inner {
    max-width: 760px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.04em;
    margin-bottom: 24px;
  }
  .hero-badge .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--teal-400);
  }
  .hero h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(36px, 5vw, 54px);
    font-weight: 400;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 18px;
  }
  .hero h1 em {
    font-style: italic;
    color: var(--purple-200);
  }
  .hero-sub {
    font-size: 17px;
    color: rgba(255,255,255,0.55);
    max-width: 520px;
    line-height: 1.7;
    margin-bottom: 40px;
  }
  .hero-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
  }
  .hero-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .hero-stat-item strong {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }
  .hero-stat-item span {
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .hero-stat-divider {
    width: 1px;
    background: rgba(255,255,255,0.12);
    align-self: stretch;
  }

  /* Main content */
  .content {
    max-width: 100%;
    margin: 0 auto;
    padding: 56px 40px 80px;
  }

  /* Section label */
  .section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--purple-500);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  /* Mode cards */
  .modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 56px;
  }
  .mode-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s;
  }
  .mode-card:hover {
    box-shadow: 0 8px 32px rgba(83,74,183,0.08);
    transform: translateY(-2px);
  }
  .mode-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    background: var(--purple-50);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
  }
  .mode-icon svg {
    width: 22px; height: 22px;
    stroke: var(--purple-500);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mode-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
  }
  .mode-card .mode-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 18px;
    line-height: 1.6;
  }
  .mode-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .mode-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
  }
  .mode-features li::before {
    content: '';
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--teal-50);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l2.5 2.5 5.5-5.5' stroke='%231D9E75' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    margin-top: 1px;
  }

  /* Tech grid */
  .tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 56px;
  }
  .tech-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 16px;
    transition: border-color 0.2s;
  }
  .tech-card:hover {
    border-color: var(--purple-200);
  }
  .tech-card svg {
    width: 20px; height: 20px;
    stroke: var(--purple-500);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-bottom: 12px;
  }
  .tech-card h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
  }
  .tech-card p {
    font-size: 12px;
    color: var(--text-faint);
    line-height: 1.5;
  }

  /* Install steps */
  .install-steps {
    margin-bottom: 56px;
  }
  .step {
    display: flex;
    gap: 20px;
    position: relative;
  }
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 17px; top: 40px;
    width: 1px;
    height: calc(100% - 8px);
    background: var(--gray-200);
  }
  .step-num {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--purple-50);
    border: 1px solid var(--purple-200);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--purple-500);
    z-index: 1;
  }
  .step-content {
    padding-bottom: 28px;
    flex: 1;
  }
  .step:last-child .step-content {
    padding-bottom: 0;
  }
  .step-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    padding-top: 6px;
  }
  .step-content p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
  }
  .step-content code {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--purple-700);
  }
  .step-content .path {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
    background: var(--gray-100);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--purple-200);
  }

  /* Requirements bar */
  .requirements {
    background: var(--purple-900);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .req-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.4);
    margin-bottom: 12px;
  }
  .req-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .req-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    padding: 6px 14px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
  }
  .req-pill svg {
    width: 14px; height: 14px;
    stroke: var(--purple-200);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .hero { padding: 56px 24px 40px; }
    .content { padding: 40px 24px 60px; }
    .modes { grid-template-columns: 1fr; }
    .tech-grid { grid-template-columns: 1fr 1fr; }
    .hero-stats { gap: 20px; }
    .requirements { flex-direction: column; align-items: flex-start; }
  }

  /* Animations */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-inner > * {
    animation: fadeUp 0.6s ease both;
  }
  .hero-badge { animation-delay: 0s; }
  .hero h1   { animation-delay: 0.1s; }
  .hero-sub  { animation-delay: 0.18s; }
  .hero-stats { animation-delay: 0.26s; }
</style>
</head>
<body>

<!-- Hero -->
<section class="hero">
  <div class="hero-inner">
    <div class="hero-badge">
      <span class="dot"></span>
      WoltLab Community Suite 6.1
    </div>
    <h1>Timeline <em>Plugin</em></h1>
    <p class="hero-sub">Ereignisse, Meilensteine und wichtige Momente interaktiv und visuell ansprechend darstellen — mit zwei einzigartigen Anzeigemodi und vollständiger ACP-Verwaltung.</p>
    <div class="hero-stats">
      <div class="hero-stat-item">
        <strong>2</strong>
        <span>Anzeigemodi</span>
      </div>
      <div class="hero-stat-divider"></div>
      <div class="hero-stat-item">
        <strong>∞</strong>
        <span>Kategorien</span>
      </div>
      <div class="hero-stat-divider"></div>
      <div class="hero-stat-item">
        <strong>DE/EN</strong>
        <span>Sprachen</span>
      </div>
      <div class="hero-stat-divider"></div>
      <div class="hero-stat-item">
        <strong>6.1+</strong>
        <span>Mindestversion</span>
      </div>
    </div>
  </div>
</section>

<!-- Main content -->
<main class="content">

  <!-- Modes -->
  <div class="section-label">Anzeigemodi</div>
  <div class="modes">
    <div class="mode-card">
      <div class="mode-icon">
        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/><line x1="12" y1="7" x2="12" y2="10"/><line x1="12" y1="14" x2="12" y2="17"/><line x1="6" y1="5" x2="10" y2="5"/><line x1="6" y1="12" x2="10" y2="12"/><line x1="6" y1="19" x2="10" y2="19"/></svg>
      </div>
      <h3>Icon Timeline</h3>
      <p class="mode-desc">Animierte Scroll-Timeline mit dynamischen Icons — ideal für visuelle Meilensteine.</p>
      <ul class="mode-features">
        <li>FontAwesome Icons pro Eintrag</li>
        <li>Animiertes Scroll-Einblenden</li>
        <li>Alternierendes Layout</li>
        <li>Custom Icon- & Rahmenfarbe</li>
        <li>Hervorhebungs-Feature</li>
      </ul>
    </div>
    <div class="mode-card">
      <div class="mode-icon">
        <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="8" y1="14" x2="16" y2="14"/></svg>
      </div>
      <h3>Datum Timeline</h3>
      <p class="mode-desc">Klappbare Einträge mit Radio-Button-Steuerung — für datum-basierte Chronologien.</p>
      <ul class="mode-features">
        <li>Radio-Button-Steuerung</li>
        <li>Klappbare Einträge</li>
        <li>Smooth Transitions</li>
        <li>Triangle-Pointer</li>
        <li>Erster Eintrag automatisch offen</li>
      </ul>
    </div>
  </div>

  <!-- Technik -->
  <div class="section-label">Technik & Verwaltung</div>
  <div class="tech-grid">
    <div class="tech-card">
      <svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
      <h4>WCF-konform</h4>
      <p>Standard-Patterns & Conventions</p>
    </div>
    <div class="tech-card">
      <svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
      <h4>Responsive</h4>
      <p>Desktop, Tablet & Mobile</p>
    </div>
    <div class="tech-card">
      <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
      <h4>Sicherheit</h4>
      <p>XSS-Schutz, CSRF-Tokens</p>
    </div>
    <div class="tech-card">
      <svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
      <h4>Rich-Text Editor</h4>
      <p>HTML-Inhalte & Suchfunktion</p>
    </div>
  </div>

  <!-- Installation -->
  <div class="section-label">Installation</div>
  <div class="install-steps">
    <div class="step">
      <div class="step-num">1</div>
      <div class="step-content">
        <h4>Plugin-Datei herunterladen</h4>
        <p>Laden Sie das Plugin-Paket herunter:</p>
        <span class="path">de.wbbsupport.wsc.timeline.6.1.1.tar</span>
      </div>
    </div>
    <div class="step">
      <div class="step-num">2</div>
      <div class="step-content">
        <h4>Im ACP installieren</h4>
        <p>Administrations-Kontrollzentrum öffnen → <code>System</code> → <code>Paketinstallation</code> → <strong>Datei hochladen</strong> → Installationsassistenten folgen.</p>
      </div>
    </div>
    <div class="step">
      <div class="step-num">3</div>
      <div class="step-content">
        <h4>Kategorie & Einträge anlegen</h4>
        <p>Navigieren Sie zu <code>Inhalte</code> → <code>Timeline</code>. Erstellen Sie mindestens eine Kategorie, wählen Sie den Displaymode und fügen Sie Einträge hinzu.</p>
      </div>
    </div>
  </div>

  <!-- Requirements -->
  <div class="requirements">
    <div>
      <div class="req-label">Systemanforderungen</div>
      <div class="req-pills">
        <span class="req-pill">
          <svg viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
          PHP 7.4+
        </span>
        <span class="req-pill">
          <svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
          MySQL / MariaDB
        </span>
        <span class="req-pill">
          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
          WCS 6.1.0 oder höher
        </span>
        <span class="req-pill">
          <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
          Deutsch & Englisch
        </span>
      </div>
    </div>
  </div>

</main>